<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8">
<title>光缆配置</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
<link href="assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css">
<link href="assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css">
<!-- END PAGE LEVEL PLUGIN STYLES -->
<!-- BEGIN PAGE STYLES -->
<link href="assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE STYLES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
<link href="assets/global/css/plugins.css" rel="stylesheet" type="text/css">
<link href="assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
<link href="assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
<link href="assets/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/logo.png"/>
<style>
	.link-active{
		background-color: #DFF0CA;
	}
	[v-cloak]{
		display: none;
	}
</style>
<!-- END THEME STYLES -->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<div id="app">
<!-- BEGIN PAGE CONTAINER -->
	<div class="page-container" v-cloak>
		<!-- BEGIN PAGE CONTENT -->
		<div class="page-content">
			<div class="container">
				<!-- BEGIN PAGE CONTENT INNER -->
				<div class="row margin-top-10">
					<div class="col-md-12 col-sm-12 occ-box">
						<div class="occ-box-menu tabbable tabbable-tabdrop">
							<ul class="nav nav-tabs">
								<li :class="{'active':tabIdx < 0}" @click="changeTab(-1)">
									<a data-toggle="tab">首页</a>
								</li>
								<li :class="{'active':tabIdx == 0}" @click="changeTab(0)">
									<a  data-toggle="tab" >
									光缆配置 </a>
								</li>
								<li :class="{'active':tabIdx == 1}" @click="changeTab(1,'跳纤')">
									<a  data-toggle="tab">
									跳纤 </a>
								</li>
								<li :class="{'active':tabIdx == 2}" @click="changeTab(2,'尾纤')">
									<a  data-toggle="tab">
									尾纤 </a>
								</li>
								<li :class="{'active':tabIdx == 3}" @click="changeTab(3,'故障定位器')">
									<a  data-toggle="tab">
									故障定位器 </a>
								</li>
								<li :class="{'active':tabIdx == 4}"  @click="changeTab(4,'接头盒')">
									<a data-toggle="tab">
									接头盒 </a>
								</li><!-- 
								<li :class="{'active':tabIdx == 5}"  @click="changeTab(5)">
									<a data-toggle="tab">
									 </a>
								</li> -->
								<li>
									<a @click="toRefresh($event)">刷新</a>
								</li>
							</ul>
						</div>
						<div class="tab-content">
							<div class="tab-pane fade in active" id="tab_5" v-show="tabIdx < 0">
								<div class="portlet light ">
									<div class="portlet-body">
										<h4 class="block">呼和浩特供电分公司目前建有3套光缆分段式在线监测系统，实现对呼供锡林路机房、东郊变及科尔沁变辐射的重要光缆进行实时在线监测</h4>
										<div class="row">
											<div class="col-sm-6">
												<div class="alert alert-success">
													<div class="table-scrollable table-scrollable-borderless table-no-boderTop">
														<table style="background-color: transparent;" class="table">
														<tbody>
														<tr>
															<td>
																<strong>光缆数量：</strong>
															</td>
															<td>
																25条
															</td>
														</tr>
														<tr>
															<td>
																<strong>光缆总长：</strong>
															</td>
															<td>
																260.79km
															</td>
														</tr>
														<!-- <tr>
															<td>
																<strong>OPGW光缆：</strong>
															</td>
															<td>
																1条
															</td>
														</tr>
														<tr>
															<td>
																<strong>ADSS光缆：</strong>
															</td>
															<td>
																1条
															</td>
														</tr> -->
														<tr>
															<td>
																<strong>出城光缆：</strong>
															</td>
															<td>
																5条
															</td>
														</tr>
														<tr>
															<td>
																<strong></strong>
															</td>
															<td>
																
															</td>
														</tr>
														</tbody>
														</table>
													</div>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="alert alert-info">
													<div class="table-scrollable table-scrollable-borderless table-no-boderTop">
														<table style="background-color: transparent;" class="table">
														<tbody>
															<tr>
																<td>
																	<strong>覆盖变电站：</strong>
																</td>
																<td>
																	20个
																</td>
															</tr>
															<tr>
																<td>
																	<strong>机房：</strong>
																</td>
																<td>
																	4个
																</td>
															</tr>
															<tr>
																<td>
																	<strong>220kV变电站：</strong>
																</td>
																<td>
																	7个
																</td>
															</tr>
															<tr>
																<td>
																	<strong>110kV变电站：</strong>
																</td>
																<td>
																	9个
																</td>
															</tr>
															<tr>
																<td>
																	<strong></strong>
																</td>
																<td>
																	
																</td>
															</tr>
														</tbody>
														</table>
													</div>
												</div>
											</div>
											<!-- <div class="col-sm-4">
												<div class="alert alert-warning">
													<div class="table-scrollable table-scrollable-borderless table-no-boderTop">
														<table style="background-color: transparent;" class="table">
														<tbody>
															<tr>
																<td>
																	<strong>安装光缆故障定位器：</strong>
																</td>
																<td>
																	100个
																</td>
															</tr>
															<tr>
																<td>
																	<strong>涉及杆塔节点：</strong>
																</td>
																<td>
																	1000个
																</td>
															</tr>
															<tr>
																<td>
																	<strong>涉及管井节点</strong>
																</td>
																<td>
																	1000个
																</td>
															</tr>
															<tr>
																<td>
																	<strong>杆塔与管井衔接点：</strong>
																</td>
																<td>
																	5个
																</td>
															</tr>
															<tr>
																<td>
																	<strong> </strong>
																</td>
																<td>
																	 
																</td>
															</tr>
														</tbody>
														</table>
													</div>
												</div>
											</div> -->
										</div>
										
	
	
	
										
									</div>
								</div>
							</div>
							<div class="tab-pane fade active in" id="tab_1" v-if="tabIdx >= 0">
								<div class="col-md-9 col-sm-9">
									<div class="portlet light ">
										<div class="portlet-title" v-show="tabIdx < 5">
											<div class="caption caption-md">
												<i class="icon-bar-chart theme-font hide"></i>
												<span class="caption-subject theme-font bold uppercase" v-text="selectedLink"></span>
											</div>
										</div>
										<div class="portlet-title" v-show="tabIdx >=5">
											<div class="row">
												<div class="col-md-6">
													<div class="form-group">
														<label class="control-label col-md-3" style="display: inline-block; margin-top: 5px;">线路名称</label>
														<div class="col-md-8">
															<input type="text" class="form-control" v-model="linkName" placeholder="请输入">
														</div>
														<div class="col-md-1">
															<button type="submit" class="btn btn-sm green" style="margin-top: 3px;" @click="createLink">添加</button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="portlet-body" v-if="tabIdx <= 0">
											<div class="table-scrollable">
												<table class="table table-striped table-bordered table-hover">
												<thead>
												<tr>
													<th scope="col">
														序号
													</th>
													<th scope="col">
														节点编号
													</th>
													<th scope="col">
														节点名称
													</th>
													<th scope="col">
														节点类型
													</th>
													<th scope="col">
														经度
													</th>
													<th scope="col">
														纬度
													</th>
												</tr>
												</thead>
												<tbody>
												<tr v-for="(optical,oid) in opticals">
													<td v-text="oid + 1"></td>
													<td v-text="optical.nodeCode"></td>
													<td v-text="optical.nodeName"></td>
													<td v-if="optical.nodeType == 'SM_Tower'">
														杆塔
													</td>
													<td v-if="optical.nodeType == 'SM_Well'">
														管井
													</td>
													<td v-if="optical.nodeType == 'SM_BDZ'">
														变电站
													</td>
													<td v-text="optical.longitude"></td>
													<td v-text="optical.latitude"></td>
												</tr>
												</tbody>
												</table>
											</div>
										</div>
										<div class="portlet-body" v-if="tabIdx > 0 && tabIdx < 4">
											<div class="table-scrollable">
												<table class="table table-striped table-bordered table-hover">
												<thead>
												<tr>
													<th scope="col">
														编号
													</th>
													<th scope="col">
														类别
													</th>
													<th scope="col">
														编码信息
													</th>
													<th scope="col">
														波长信息
													</th>
													<th scope="col">
														监测站的距离
													</th>
													<th scope="col">
														接入时间
													</th>
													<th scope="col">
														属性
													</th>
													<th scope="col">
														监测站
													</th>
													<th scope="col">
														监测站端口
													</th>
													<th scope="col">
														扩展盘通道
													</th>
													<th scope="col">
														经度
													</th>
													<th scope="col">
														纬度
													</th>
												</tr>
												</thead>
												<tbody>
												<tr v-for="(node,nid) in nodes">
													<td v-text="node.nodeCode"></td>
													<td v-text="node.nodeType"></td>
													<td v-text="node.codeInfo"></td>
													<td v-text="node.wavelength"></td>
													<td v-text="node.distance + '米'"></td>
													<td v-text="node.joinTime"></td>
													<td v-text="node.nodeAttr"></td>
													<td v-text="node.station"></td>
													<td v-text="node.stationPort"></td>
													<td v-text="node.extendChannel"></td>
													<td v-text="node.longitude"></td>
													<td v-text="node.latitude"></td>
												</tr>
												</tbody>
												</table>
											</div>
										</div>
										<div class="portlet-body" v-if="tabIdx >= 4 ">
											<div class="table-scrollable">
												<table class="table table-striped table-bordered table-hover">
													<thead>
														<tr>
															<th scope="col">
																编号
															</th>
															<th scope="col">
																类别
															</th>
															<th scope="col">
																编码
															</th>
															<th scope="col">
																运行时间
															</th>
															<th scope="col">
																经度
															</th>
															<th scope="col">
																纬度
															</th>
															<th scope="col">
																接入时间
															</th>
														</tr>
													</thead>
													<tbody>
														<tr v-for="(box,bid) in boxes">
															<td v-text="bid + 1"></td>
															<td v-text="box.BoxName"></td>
															<td v-text="box.BoxCode"></td>
															<td v-text="box.Runtime"></td>
															<td v-text="box.Longitude"></td>
															<td v-text="box.Latitude"></td>
															<td v-text="box.cdate"></td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
										<div class="portlet-body" v-show="tabIdx >= 5">
											<div class="table-scrollable">
												<table class="table table-striped table-bordered table-hover table-im-ex">
												<thead>
												<tr>
													<th scope="col" style="text-align: center;">
														序号
													</th>
													<th scope="col" colspan="2">
														链路名称
													</th>
													<th scope="col">
														坐标信息
													</th>
													<th scope="col">
														链路信息
													</th>
													<th scope="col">
														接头盒信息
													</th>
												</tr>
												</thead>
												<tbody>
												<tr v-for="(el,lid) in links">
													<td v-text="lid + 1"></td>
													<td v-text="el.linkName"></td>
													<td>
														<a class="delete" href="javascript:;" @click="eraseLink($event,lid,el.linkId,el.linkName)">删除链路 </a>
													</td>
													<td class="td-space">
														<a class="import" @click="toImportCoordinate($event,lid,el)">导入 </a>
														<a class="export" @click="toExportCoordinate($event,lid,el)">导出 </a>
														<a class="delete" @click="toEraseCoordinate($event,lid,el)">删除 </a>
													</td>
													<td class="td-space">
														<a class="import" @click="toImportNodes($event,lid,el)">导入 </a>
														<a class="export" @click="toExportNodes($event,lid,el)">导出 </a>
														<a class="delete" @click="toEraseNodes($event,lid,el)">删除 </a>
													</td>
													<td class="td-space">
														<a class="import" @click="toImportboxes($event,lid,el)">导入 </a>
														<a class="export" @click="toExportBoxes($event,lid,el)">导出 </a>
														<a class="delete" @click="toEraseboxes($event,lid,el)">删除 </a>
													</td>
												</tr>
												</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
								
										
								<div class="col-md-3 col-sm-3">
									<!-- BEGIN PORTLET-->
									<div class="portlet light" style="height: 400px;">
										<div class="portlet-title tabbable-line">
											<div class="caption caption-md">
												<i class="icon-globe theme-font hide"></i>
												<span class="caption-subject theme-font bold uppercase">链路列表</span>
											</div>
										</div>
										<div class="portlet-body">
											<ul class="feeds">
												<li v-for="(el,i) in links" @click="changeLink(i)">
													<a>
														<div class="desc" v-text="el.linkName" v-bind:class="{'link-active':i == idx}"></div>
													</a>
												</li>
											</ul>
										</div>
									</div>
									<!-- END PORTLET-->
								</div>

								
							</div>
							

						</div>
						
						
					</div>
					
				</div>
				
				<!-- END PAGE CONTENT INNER -->
			</div>
		</div>
		<!-- END PAGE CONTENT -->
	</div>
<!-- END PAGE CONTAINER -->
	<div class="upload-box" style="display:none;">
		<input type="file" name="coordinate" id="coordinate" @change="readCoordinate" />
		<input type="file" name="nodes" id="nodes" @change="readNodes" />
		<input type="file" name="boxes" id="boxes" @change="readboxes" />
	</div>
</div>


<!-- BEGIN JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/global/plugins/respond.min.js"></script>
<script src="assets/global/plugins/excanvas.min.js"></script> 
<![endif]-->
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/js/axios.min.js"></script>
<script src="assets/js/xlsx.full.min.js"></script>
<script src="assets/js/config.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
jQuery(document).ready(function() {
	let h = $(window).height();
	console.log(h);
	$("#app").height(h);
	$(".page-container").height(h);
	$(".page-content").height(h);
	const {createApp} = Vue;
	const app = createApp({
		data(){
			return {
				links:[],//链路列表
				idx:0,//链路index
				nodes:[],//节点列表
				tabIdx:-1,//标签index
				selectedLink:"",//被选中的链路名称
				tabText:"",//节点类型名称
				linkName:"",//添加的链路名称
				nodeType:"",//节点类型
				activeIdx:0,//正在导入导出的index,
				opticals:[],
				list:[],
				boxes:[],//接头盒列表
			}
		},
		methods:{
			createLink(e){
				e.preventDefault();
				layer.load("数据传输中，请稍后...",{icon:2});
				if(!this.linkName){
					layer.msg("链路名称不能为空",{icon:1,time:3000});
					return;
				}
				axios.post(config.getUrl() + "/createLink",{linkName:this.linkName}).then(res => {
					console.log(res);
					if(res.status == 200){
						if(res.data.code == 0){
							layer.msg("创建链路成功",{icon:1,time:2000});
							this.load()
						}else{
							layer.closeAll();
							layer.alert("创建链路失败，代码为：" + res.data.msg,{icon:1,time:3000});
						}
					}else{
						layer.closeAll();
						layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
					}
				})
			},
			changeLink(num){
				this.idx = num;
				this.getNodes();
				this.getBoxes()
			},
			changeTab(num,tp){
				this.tabIdx = num;
				this.nodeType = tp;
				if(this.tabIdx >= 5){
					return;
				}
				this.getNodes();
			},
			eraseLink(e,lid,linkId,linkName){
				if(linkId <= 0){
					layer.msg("请选择要删除的链路",{icon:1,time:2000});
					return;
				}
				var that = this;
				layer.confirm(`确定要删除"${this.links[lid]['linkName']}"这条链路吗？`,{btn:['是','否']},function(){
					axios.post(config.getUrl() + "/eraseLink",{linkId}).then(res => {
						console.log(res);
						if(res.status == 200){
							layer.closeAll();
							if(res.data.code == 0){
								layer.msg("删除成功",{icon:1,time:2000});
								that.links.splice(lid,1);
							}else{
								layer.msg("删除失败" + res.data.msg,{icon:1,time:2000});
								try {
									console.log(error);
								} catch (error) {
									console.log(error);
								}
							}
						}else{
							layer.closeAll();
							layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
							try {
								console.log(error);
							} catch (error) {
								
							}
						}
					}).then(res => {
						axios.post(config.getUrl() + "/jsonEraseLink",{linkId:linkId}).then(rs =>{
							console.log(rs);
							if(rs.status == 200){
								if(rs.data.code == 0){
									layer.msg("删除成功",{icon:1,time:2000});
								}else{
									try {
										console.log(error);
									} catch (error) {
										
									}
									layer.msg("删除失败" + rs.data.msg,{icon:1,time:2000});
								}
							}else{
								try {
										console.log(error);
									} catch (error) {
										
									}
								layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
							}
						})
					}).then(res => {
						axios.post(config.getUrl() + "/lineEraseLink",{linkId:linkId}).then(rs =>{
							console.log(rs);
							if(rs.status == 200){
								if(rs.data.code == 0){
									layer.msg("删除成功",{icon:1,time:2000});
								}else{
									try {
										console.log(error);
									} catch (error) {
										
									}
									layer.msg("删除失败" + rs.data.msg,{icon:1,time:2000});
								}
							}else{
								try {
										console.log(error);
									} catch (error) {
										
									}
								layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
							}
						})
					})
				});
				
			},
			toImportCoordinate(e,lid,el){
				this.activeIdx = lid;
				$("#coordinate").click();
			},
			toExportCoordinate(e,lid,el){
				let linkName = this.links[lid]['linkName'];
				axios.post(config.getUrl() + "/getOpticals",{linkName}).then(res => {
					if(res.status == 200){
						layer.closeAll();
						if(res.data.code ==0 ){
							if(!(res.data.data instanceof Array) || res.data.data.length == 0){
								layer.msg("没有查到符合条件的信息，无法导出",{icon:1,time:3000});
								return;
							}
							this.list = this.deFormatOptical(res.data.data);
							console.log(this.list);
							var sheet = XLSX.utils.json_to_sheet(this.list); // data为需要导出的表格数据
                  			this.exportExcel(sheet,`${linkName}光缆节点信息.xlsx`);
						}else{
							layer.msg("获取数据失败," + res.data.msg,{icon:1,time:3000});
						}
					}else{
						layer.closeAll();
						layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
					}
				})
			},
			toEraseCoordinate(e,lid,el){
				let linkName = this.links[lid]['linkName'];
				var that = this;
				layer.confirm(`确定要删除${linkName}下的光缆信息吗？`,{btn:['是','否']},function(){
					axios.post(config.getUrl() + "/eraseOptical",{linkName}).then(res => {
						console.log(res);
						if(res.status == 200){
							layer.closeAll();
							if(res.data.code ==0 ){
								layer.msg("删除数据成功");
							}else{
								layer.msg("删除数据失败," + res.data.msg,{icon:1,time:3000});
								try {
									console.log(error);
								} catch (error) {
									console.log(error);
								}
							}
						}else{
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
							try {
								console.log(error);
							} catch (error) {
								
							}
						}
					}).then(res => {
						axios.post(config.getUrl() + "/jsonEraseOpticals",{linkId:el.linkId}).then(rs =>{
							console.log(rs);
							if(rs.status == 200){
								if(rs.data.code == 0){
									layer.msg("删除成功",{icon:1,time:2000});
								}else{
									try {
										console.log(error);
									} catch (error) {
										
									}
									layer.msg("删除失败" + rs.data.msg,{icon:1,time:2000});
								}
							}else{
								try {
									console.log(error);
								} catch (error) {
									
								}
								layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
							}
						})
					}).then(res => {
						axios.post(config.getUrl() + "/lineEraseNode",{linkId:el.linkId}).then(rs =>{
							console.log(rs);
							if(rs.status == 200){
								if(rs.data.code == 0){
									layer.msg("删除成功",{icon:1,time:2000});
								}else{
									try {
										console.log(error);
									} catch (error) {
										
									}
									layer.msg("删除失败" + rs.data.msg,{icon:1,time:2000});
								}
							}else{
								try {
									console.log(error);
								} catch (error) {
									
								}
								layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
							}
						})
					})
				})
			},
			toImportNodes(e,lid,el){
				this.activeIdx = lid;
				$("#nodes").click();
			},
			toExportNodes(e,lid,el){
				let linkName = this.links[lid]['linkName'];
				axios.post(config.getUrl() + "/getNodes",{linkName}).then(res => {
					if(res.status == 200){
						layer.closeAll();
						if(res.data.code ==0 ){
							if(!(res.data.data instanceof Array) || res.data.data.length == 0){
								layer.msg("没有查到符合条件的信息，无法导出",{icon:1,time:3000});
								return;
							}
							this.list = this.deFormatNode(res.data.data);
							console.log(this.list);
							var sheet = XLSX.utils.json_to_sheet(this.list); // data为需要导出的表格数据
                  			this.exportExcel(sheet,`${linkName}节点信息.xlsx`);
						}else{
							layer.msg("获取数据失败," + res.data.msg,{icon:1,time:3000});
						}
					}else{
						layer.closeAll();
						layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
					}
				})
			},
			toEraseNodes(e,lid,el){
				let linkName = this.links[lid]['linkName'];
				var that = this;
				layer.confirm(`确定要删除${linkName}下的节点信息吗？`,{btn:['是','否']},function(){
					axios.post(config.getUrl() + "/eraseNode",{linkName}).then(res => {
						if(res.status == 200){
							layer.closeAll();
							if(res.data.code ==0 ){
								layer.msg("删除数据成功");
							}else{
								layer.msg("删除数据失败," + res.data.msg,{icon:1,time:3000});
							}
						}else{
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
						}
					})
				})
			},
			toImportboxes(e,lid,el){
				this.activeIdx = lid;
				$("#boxes").click();
			},
			toExportBoxes(e,lid,el){
				let linkName = this.links[lid]['linkName'];
				let linkId = this.links[lid]['linkId'];
				axios.post(config.getUrl() + "/getBoxes",{linkId}).then(res => {
					if(res.status == 200){
						console.log(res.data);
						layer.closeAll();
						if(res.data.code ==0 ){
							if(!(res.data.data instanceof Array) || res.data.data.length == 0){
								layer.msg("没有查到符合条件的信息，无法导出",{icon:1,time:3000});
								return;
							}
							let list = this.deFormatBox(res.data.data);
							/* for(var i=0;i<list.length;i++){
								let tm = new Date(list[i]['接入时间']);
								list[i]['接入时间'] = `${tm.toLocaleDateString().replace(/\//g,"-")} ${tm.toTimeString().substr(0,8)}`
							} */
							console.log(list);
							var sheet = XLSX.utils.json_to_sheet(list); // data为需要导出的表格数据
                  			this.exportExcel(sheet,`${linkName}接头盒信息.xlsx`);
						}else{
							layer.msg("获取数据失败," + res.data.msg,{icon:1,time:3000});
						}
					}else{
						layer.closeAll();
						layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
					}
				})
			},
			formatOptical(dt,linkName){
				if(dt.length == 0){
					return false;
				}
				var list = [];
				for(var k in dt){
					let obj = {};
					obj.nodeCode = dt[k]['节点编号'];
					obj.nodeName = dt[k]['节点名称'];
					/* if(k == '节点类型'){
						let vl = dt[k];
						if(vl == '管井'){
							obj.nodeType = "SM_Well"
						}else if(vl == "杆塔"){
							obj.nodeType = "SM_Tower"
						}else if(vl == "机房" || vl == "变电站"){
							obj.nodeType = "SM_BDZ"
						}else{
							obj.nodeType = ""
						}
					} */
					let vl = dt[k]['节点类型'];
					if(vl == '管井'){
						obj.nodeType = "SM_Well"
					}else if(vl == "杆塔"){
						obj.nodeType = "SM_Tower"
					}else if(vl == "机房" || vl == "变电站"){
						obj.nodeType = "SM_BDZ"
					}else{
						obj.nodeType = ""
					}
					obj.longitude = dt[k]['经度'];
					obj.latitude = dt[k]['纬度'];
					obj.linkName = linkName;
					obj.R = dt[k]['R'];
					obj.G = dt[k]['G'];
					obj.B = dt[k]['B'];
					list.push(obj);
				}
				return list;
			},
			deFormatOptical(dt){
				if(!(dt instanceof Array) || dt.length == 0){
					return [];
				}
				var list = [];
				for(var k in dt){
					let obj = {};
					obj['节点编号'] = dt[k]['nodeCode'];
					obj['节点名称'] = dt[k]['nodeName'];
					/* if(k == "nodeType"){
						let vl = dt[k];
						if(vl == "SM_Well"){
							obj['节点类型'] = "管井"
						}else if(vl == "SM_Tower"){
							obj['节点类型'] = "杆塔"
						}else if(vl == "SM_BDZ"){
							obj['节点类型'] = "变电站"
						}else{
							obj['节点类型'] = ""
						}
					} */
					let vl = dt[k]['nodeType'];
					if(vl == "SM_Well"){
						obj['节点类型'] = "管井"
					}else if(vl == "SM_Tower"){
						obj['节点类型'] = "杆塔"
					}else if(vl == "SM_BDZ"){
						obj['节点类型'] = "变电站"
					}else{
						obj['节点类型'] = ""
					}
					obj['经度'] = dt[k]['longitude'];
					obj['纬度'] = dt[k]['latitude'];
					obj["R"] = dt[k]['R'];
					obj["G"] = dt[k]['G'];
					obj["B"] = dt[k]['B'];
					list.push(obj);
				}
				return list;
			},
			formatNode(dt,linkName){
				if(dt.length == 0){
					return false;
				}
				var list = [];
				for(var k in dt){
					let obj = {};
					obj.nodeCode = dt[k]['编号'];
					obj.nodeType = dt[k]['类别'];
					obj.codeInfo = dt[k]['编码信息'];
					obj.wavelength = dt[k]['波长信息'];
					obj.distance = dt[k]['监测站的距离'];
					obj.joinTime = dt[k]['接入时间'];
					obj.nodeAttr = dt[k]['属性'];
					obj.station = dt[k]['监测站'];
					obj.stationPort = dt[k]['监测站端口'];
					obj.extendChannel = dt[k]['扩展盘通道'];
					obj.linkName = linkName;
					obj.nodeName = dt[k]['监测站名称'];
					obj.longitude = dt[k]['经度'];
					obj.latitude = dt[k]['纬度'];
					list.push(obj);
				}
				return list;
			},
			deFormatNode(dt){
				if(!(dt instanceof Array) || dt.length == 0){
					return [];
				}
				var list = [];
				for(var k in dt){
					let obj = {};
					obj['编号'] = dt[k]['nodeCode'];
					obj['类别'] = dt[k]['nodeType'];
					obj['编码信息'] = dt[k]['codeInfo'];
					obj['波长信息'] = dt[k]['wavelength'];
					obj['监测站的距离'] = dt[k]['distance'];
					obj['接入时间'] = dt[k]['joinTime'];
					obj['属性'] = dt[k]['nodeAttr'];
					obj['监测站'] = dt[k]['station'];
					obj['监测站端口'] = dt[k]['stationPort'];
					obj['扩展盘通道'] = dt[k]['extendChannel'];
					obj['监测站名称'] = dt[k]['nodeName'];
					obj['经度'] = dt[k]['longitude'];
					obj['纬度'] = dt[k]['latitude'];
					list.push(obj);
				}
				return list;
			},
			formatBox(dt,linkId){
				if(dt.length == 0){
					return false;
				}
				var list = [];
				for(var k in dt){
					let obj = {};
					obj.BoxID = dt[k]['接头盒编号'];
					obj.BoxName = dt[k]['接头盒名称'];
					obj.BoxCode = dt[k]['接头盒编码'];
					obj.Runtime = dt[k]['运行时间'];
					obj.Longitude = dt[k]['经度'];
					obj.Latitude = dt[k]['纬度'];
					obj.cdate = dt[k]['接入时间'];
					obj.linkId = linkId;
					list.push(obj);
				}
				return list;
			},
			deFormatBox(dt){
				try {
					if(!(dt instanceof Array) || dt.length == 0){
						return [];
					}
					var list = [];
					for(var k in dt){
						let obj = {};
						obj['接头盒编号'] = dt[k]['BoxID'];
						obj['接头盒名称'] = dt[k]['BoxName'];
						obj['接头盒编码'] = dt[k]['BoxCode'];
						obj['运行时间'] = dt[k]['Runtime'];
						obj['经度'] = dt[k]['longitude'];
						obj['纬度'] = dt[k]['latitude'];
						obj['接入时间'] = dt[k]['cdate'];
						list.push(obj);
					}
					return list;
				} catch (error) {
					console.log(error);
				}
			},
			async readCoordinate(e){
				console.log(e.target);
				try {
					if(e.target.value == ""){
						return;
					}
					console.log(e.target.files[0]);
					let file = e.target.files[0];
					var dt = await this.readExcel(file);
					document.getElementById("coordinate").value = "";					
					let linkName = this.links[this.activeIdx]['linkName'];
					let linkId = this.links[this.activeIdx]['linkId']
					dt = this.formatOptical(dt,linkName);
					console.log(dt);
					if(dt.length == 0){
						layer.msg("数据不能为空",{icon:1,time:2000});
						return;
					}
					axios.post(config.getUrl() + "/importOpticals",{linkName,arr:dt}).then(res => {
						console.log(res);
						if(res.status == 200){
							layer.closeAll();
							if(res.data.code == 0){
								layer.msg("导入数据成功",{icon:1,time:3000});
							}else{
								try {
									console.log(aaa);
								} catch (error) {
									console.log(error);
								}
								layer.msg("导入数据失败" + res.data.msg,{icon:1,time:3000});
							}
						}else{
							layer.closeAll();
							try {
								console.log(aaa);
							} catch (error) {
								console.log(error);
							}
							layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
						}
					}).then(res => {
						console.log("开始写入json");
						axios.post(config.getUrl() + "/jsonImportOpticals",{linkId,linkName,arr:dt}).then(res => {
							if(res.status == 200){
								console.log("res=>",res);
								layer.closeAll();
								if(res.data.code == 0){
									layer.msg("创建JSON成功",{icon:1,time:3000});
								}else{
									try {
										console.log(aaa);
									} catch (error) {
										
									}
									layer.msg("创建JSON失败" + res.data.msg,{icon:1,time:3000});
								}
							}else{
								layer.closeAll();
								try {
									console.log(aaa);
								} catch (error) {
									
								}
								layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
							}
						})
					}).then(res => {
						console.log("开始写入Js_POI.json");
						axios.post(config.getUrl() + "/jsonCreateLine",{linkId,linkName,arr:dt}).then(res => {
							if(res.status == 200){
								layer.closeAll();
								console.log("poi=>",res);
								if(res.data.code == 0){
									layer.msg("创建JSON成功",{icon:1,time:3000});
								}else{
									try {
										console.log(aaa);
									} catch (error) {
										
									}
									layer.msg("创建JSON失败" + res.data.msg,{icon:1,time:3000});
								}
							}else{
								layer.closeAll();
								try {
									console.log(aaa);
								} catch (error) {
									
								}
								layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
							}
						})
					})
				} catch (error) {
					layer.closeAll();
					console.log(error);
					layer.msg("",{icon:1,time:3000});
				}
				
				
			},
			async readNodes(e){
				console.log(e.target);
				try {
					if(e.target.value == ""){
						return;
					}
					console.log(e.target.files[0]);
					let file = e.target.files[0];
					var dt = await this.readExcel(file);
					document.getElementById("nodes").value = "";					
					let linkName = this.links[this.activeIdx]['linkName'];
					console.log('dt1=>',dt);
					dt = this.formatNode(dt,linkName);
					console.log(dt);
					if(dt.length == 0){
						layer.msg("数据不能为空",{icon:1,time:2000});
						return;
					}
					axios.post(config.getUrl() + "/importNodes",{linkName,arr:dt}).then(res => {
						console.log(res);
						if(res.status == 200){
							layer.closeAll();
							if(res.data.code == 0){
								layer.msg("导入数据成功",{icon:1,time:3000});
							}else{
								layer.msg("导入数据失败，" + res.data.msg,{icon:1,time:3000});
							}
						}else{
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
						}
					})
				} catch (error) {
					layer.closeAll();
					console.log(error);
					layer.msg("",{icon:1,time:3000});
				}
			},
			async readboxes(e){
				console.log(e.target);
				try {
					if(e.target.value == ""){
						return;
					}
					console.log(e.target.files[0]);
					let file = e.target.files[0];
					var dt = await this.readExcel(file);
					document.getElementById("boxes").value = "";					
					let linkName = this.links[this.activeIdx]['linkName'];
					let linkId = this.links[this.activeIdx]['linkId'];
					console.log('dt1=>',dt);
					dt = this.formatBox(dt,linkId);
					/* if(dt.length > 0){
						for(var i=0;i<dt.length;i++){
							dt[i]['cdate'] = new Date(dt[i]['cdate']).getTime() / 1000;
						}
					} */
					console.log(dt);
					if(dt.length == 0){
						layer.msg("数据不能为空",{icon:1,time:2000});
						return;
					}
					axios.post(config.getUrl() + "/importBoxes",{linkId,arr:dt}).then(res => {
						console.log(res);
						if(res.status == 200){
							layer.closeAll();
							if(res.data.code == 0){
								layer.msg("导入数据成功",{icon:1,time:3000});
							}else{
								layer.msg("导入数据失败，" + res.data.msg,{icon:1,time:3000});
							}
						}else{
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
						}
					})
				} catch (error) {
					layer.closeAll();
					console.log(error);
					layer.msg("",{icon:1,time:3000});
				}
			},
			getNodes(){
				if(this.links.length == 0) return;
				if(this.idx >= this.links.length){
					this.idx = this.links.length - 1;
				}
				try {
					var linkName = this.links[this.idx]['linkName'];
					this.selectedLink = linkName;
					console.log(this.selectedLink);
					if(!linkName){
						layer.msg()
					}
					if(this.tabIdx > 0){
						axios.post(config.getUrl() + "/getNodes",{linkName,nodeType:this.nodeType}).then(res => {
							console.log(res);
							if(res.status == 200){
								layer.closeAll();
								if(res.data.code == 0){
									this.nodes = res.data.data;
									this.nodes = [];
									if(res.data.data instanceof Array && res.data.data.length > 0){
										for(var k in res.data.data){
											this.nodes.push(res.data.data[k]);
										}
									}
									console.log("node-" + this.nodeType + "=>",this.nodes);
								}else{
									layer.msg("",{icon:1,time:3000});
								}
							}else{
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
							}
						})
					}else if(this.tabIdx < 4){
						axios.post(config.getUrl() + "/getOpticals",{linkName}).then(res => {
							console.log(res);
							if(res.status == 200){
								layer.closeAll();
								if(res.data.code == 0){
									this.opticals = res.data.data;
								}else{
									layer.msg("获取数据失败",{icon:1,time:3000});
								}
							}else{
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
							}
						})
					}else{
						let linkId = this.links[this.idx]['linkId'];
						console.log(linkId);
						if(!linkId || linkId <= 0 || linkId == undefined){
							layer.msg("获取线路ID错误",{time:3000});
							return;
						}
						axios.post(config.getUrl() + "/getBoxes",{linkId}).then(res => {
							console.log(res);
							if(res.status == 200){
								layer.closeAll();
								if(res.data.code == 0){
									this.boxes = res.data.data;
								}else{
									layer.msg("获取数据失败",{icon:1,time:3000});
								}
							}else{
								layer.closeAll();
								layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
							}
						})
					}
				} catch (error) {
					layer.closeAll();
					console.log(error);
					layer.msg("未知错误，" + error,{icon:1,time:3000});
				}
			},
			//读取接头盒
			async getBoxes(){
				try {
					let linkId = this.links[this.idx]['linkId'];
					console.log(linkId);
					if(!linkId || linkId <= 0 || linkId == undefined){
						layer.msg("获取线路ID错误",{time:3000});
						return;
					}
					axios.post(config.getUrl() + "/getBoxes",{linkId}).then(res => {
						console.log(res);
						if(res.status == 200){
							layer.closeAll();
							if(res.data.code == 0){
								let list = res.data.data;
								this.boxes = list;
							}else{
								layer.msg("获取数据失败",{icon:1,time:3000});
							}
						}else{
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
						}
					})
				} catch (error) {
					layer.closeAll();
					console.log(error);
					layer.msg("未知错误，" + error,{icon:1,time:3000});
				}
			},
			//读取EXCEL文件
			async readExcel(file) {
				return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(false);
				}, 30000);
				var fileReader = new FileReader();
				fileReader.onload = function (ev) {
					console.log("aaa");
					try {
					var data = ev.target.result;
					var workbook = XLSX.read(data, {
						type: "binary",
					}); //以二进制流的方式得到整份excal表格对象
					var persons = []; //存储获取到的数据
					} catch (error) {
					console.log("文件类型不正确，只能读取.xlsx文件");
					}
					// 表格的表格范围，可用于判断表头是否数量是否正确
					var fromTo = "";
					// 遍历每张表读取
					for (var sheet in workbook.Sheets) {
					if (workbook.Sheets.hasOwnProperty(sheet)) {
						fromTo = workbook.Sheets[sheet]["!ref"];
						console.log(fromTo);
						persons = persons.concat(
						XLSX.utils.sheet_to_json(workbook.Sheets[sheet],{head:0,defval:" "})
						);
						//break; // 如果只取第一张表，就取消注释这行
					}
					}
					//在控制台打印出来表格中的数据
					resolve(persons);
				};
				fileReader.readAsBinaryString(file);
				});
			},
			/**
			 * 通用的打开下载对话框方法，没有测试过具体兼容性
			 * @param url 下载地址，也可以是一个blob对象，必选
			 * @param saveName 保存文件名，可选
			 */
			openDownloadDialog(url, saveName) {
				if (typeof url == "object" && url instanceof Blob) {
					url = URL.createObjectURL(url); // 创建blob地址
				}
				var aLink = document.createElement("a");
				aLink.href = url;
				aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
				var event;
				if (window.MouseEvent) event = new MouseEvent("click");
				else {
				event = document.createEvent("MouseEvents");
				event.initMouseEvent(
					"click",
					true,
					false,
					window,
					0,
					0,
					0,
					0,
					0,
					false,
					false,
					false,
					false,
					0,
					null
				);
				}
				aLink.dispatchEvent(event);
			},
			sheet2blob(sheet, sheetName) {
				sheetName = sheetName || "sheet1";
				var workbook = {
					SheetNames: [sheetName],
					Sheets: {},
				};
				workbook.Sheets[sheetName] = sheet;
				// 生成excel的配置项
				var wopts = {
					bookType: "xlsx", // 要生成的文件类型
					bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
					type: "binary",
				};
				var wbout = XLSX.write(workbook, wopts);
				var blob = new Blob([s2ab(wbout)], {
					type: "application/octet-stream",
				});
				// 字符串转ArrayBuffer
				function s2ab(s) {
					var buf = new ArrayBuffer(s.length);
					var view = new Uint8Array(buf);
					for (var i = 0; i != s.length; ++i)
						view[i] = s.charCodeAt(i) & 0xff;
					return buf;
				}
				return blob;
			},
			exportExcel(sheet,fileName) {
				var blob = this.sheet2blob(sheet);
				this.openDownloadDialog(blob, fileName);
			},
			load(){
				layer.load(0,{msg:"努力加载中，请稍后..."});
				console.log(config.baseUrl);
				try {
					axios.post(config.getUrl() + "/getLinks",{}).then((res) => {
						console.log(res);
						return new Promise((resolve,reject) => {
							if(res.status == 200){
								if(res.data.code == 0){
									layer.closeAll()
									this.links = res.data.data;
									if(this.links.length == 0) return;
									if(this.idx >= this.links.length){
										this.idx = this.links.length - 1;
									}
									this.selectedLink = this.links[this.idx]['linkName'];
									resolve()
								}else{
									layer.closeAll();
									layer.alert("获取链路列表失败，代码为：" + res.data.msg,{icon:1,time:3000});
									reject();
								}
							}else{
								layer.closeAll();
								layer.alert("网络连接失败，请联系管理员",{icon:1,time:3000});
								reject();
							}
						});
					},err => {
						console.log(aa);
					}).then(res => {
						console.log("加载列表成功");
						this.getNodes();
						this.getBoxes();
					})
				} catch (error) {
					console.log(error);
					layer.closeAll();
				}
			},
			toRefresh(e){
				e.preventDefault();
				try {
					axios.post(config.getUrl() + "/updateJsonFile",{}).then(res => {
						console.log(res);
						if(res.status == 200){
							layer.closeAll();
							if(res.data.code == 0){
								
							}else{
								layer.msg("",{icon:1,time:3000});
							}
						}else{
							layer.closeAll();
							layer.msg("网络通讯错误，请联系管理员",{icon:1,time:3000});
						}
					})
				} catch (error) {
					console.log(error);
					layer.closeAll();
				}
			}
		},
		created(){
			this.load()
		}
   });
   app.mount("#app")
});
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>